<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>添加商品页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{style/admin.css}" media="all">
    <!--<link rel="stylesheet" th:href="@{/style/admin.css}" media="all">-->
    <script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.config.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.all.min.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
    <script type="text/javascript" th:src="@{/laydate/laydate.js}"></script>
    <style type="text/css">
        .product-price {
            width: 50px;
            border: none;
        }

        #editor {
            margin-left: 120px;
        }

        .one-img {
            /*border: 1px solid red;*/
            height: 100px;
            width: 100px;
            margin-left: 110px;
        }

        .Fengetext {
            color: red;
        }

        .layui-card-header .layui-icon {
            line-height: initial;
            position: absolute;
            right: 0px;
            top: 50%;
            margin-top: -15px;
        }

        .upaction {
            background: red;
        }

        blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul {
            margin: 0;
            padding: 1px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-container"></div>
            <div class="layui-form-item">
                <div class="layui-form-item">
                    <label class="layui-form-label Fengetext">商品规格：</label>
                    <div class="layui-input-block">
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品ID</label>
                            <div class="layui-input-block">
                                <input type="text" id="product-id" name="productId" autocomplete="off"
                                       th:value="${productId}" class="layui-input" readonly="readonly">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">规格名称</label>
                            <div class="layui-input-block">
                                <input type="text" id="guige-name" name="guigeName" autocomplete="off" value=""
                                       placeholder="请输入规格名称" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品尺寸</label>
                            <div class="layui-input-block">
                                <input type="text" id="proSize" name="proSize" autocomplete="off" value=""
                                       placeholder="请输入商品尺寸,单位为mm" class="layui-input proSize">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品长度</label>
                            <div class="layui-input-block">
                                <input type="text" id="proLength" name="proLength" value="" autocomplete="off"
                                       placeholder="请输入商品长度,单位为mm" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品宽度</label>
                            <div class="layui-input-block">
                                <input type="text" id="proWidth" name="proWidth" value="" autocomplete="off"
                                       placeholder="请输入商品宽度,单位为mm" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品高度</label>
                            <div class="layui-input-block">
                                <input type="text" id="proHeight" name="proHeight" value="" autocomplete="off"
                                       placeholder="请输入商品高度,单位为mm" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品重量</label>
                            <div class="layui-input-block">
                                <input type="text" id="proWeight" name="proWeight" autocomplete="off" value=""
                                       placeholder="请输入商品重量,单位为kg" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品体积</label>
                            <div class="layui-input-block">
                                <input type="text" id="proTiji" name="proTiji" autocomplete="off" value=""
                                       placeholder="请输入商品体积,单位为mm3" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品容积</label>
                            <div class="layui-input-block">
                                <input type="text" id="proVolume" name="proVolume" autocomplete="off" value=""
                                       placeholder="请输入商品容积,单位为ml" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品颜色</label>
                            <div class="layui-input-block">
                                <input type="text" id="proColor" name="proColor" autocomplete="off" value=""
                                       placeholder="请输入颜色" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">其他规格</label>
                            <div class="layui-input-block">
                                <input type="text" id="otherGuige" name="otherGuige" autocomplete="off" value=""
                                       placeholder="请输入其他规格" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <form name="fenDanform" class="form">
                    <div class="layui-col-md6">
                        <div class="grid-demo">
                            <div class="layui-form-item">
                                <label class="layui-form-label">分单发货</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" id="fenDan" name="fenDan" title="分单" value=""
                                           lay-filter="fenDan">
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="grid-demo">
                            <div class="layui-form-item">
                                <label class="layui-form-label">每人限购数量</label>
                                <div class="layui-input-block">
                                    <input type="text" id="buyCount" name="buyCount" title="每人限购数量" value="10000"
                                           placeholder="请输入整数（0~99999999）" class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="grid-demo">
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品限购总数量</label>
                                <div class="layui-input-block">
                                    <input type="text" id="buyCountTotal" name="buyCountTotal" title="商品限购总数量"
                                           value="1000000" placeholder="请输入整数（0~99999999）" class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="grid-demo">
                            <div class="layui-form-item">
                                <label class="layui-form-label">购买标志</label>
                                <div class="layui-input-inline">
                                    <select name="quiz1" id="buySign" lay-verify="required" lay-filter="buySign">
                                        <option value="0">请选择分类</option>
                                        <option value="1">活动专区</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="grid-demo">
                            <div class="layui-form-item">
                                <label class="layui-form-label">提成标志</label>
                                <div class="layui-input-inline">
                                    <select name="quiz1" id="commissionSign" lay-verify="required"
                                            lay-filter="commissionSign">
                                        <option value="0">请选择分类</option>
                                        <option value="1">活动专区</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="grid-demo">
                <div class="layui-form-item">
                    <label class="layui-form-label   Fengetext">商品图片:</label>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品主图</label>
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="guigeImg">上传规格图</button>
                        <div class="layui-upload-list  one-img">
                            <img class="layui-upload-img" id="guigeImg_img" width="100px" height="100px">
                            <p id="demo1Text"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="grid-demo">
                <div class="layui-form-item">
                    <label class="layui-form-label">商品图组</label>
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="addGuiGeImgGroup" value="upimags">上传规格图组</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            图组预览图：
                            <div class="layui-upload-list" id="guigeImgGroup"></div>
                            <p id="imgText"></p>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>

        <!--<div class="layui-form-item">-->
        <!--<div class="layui-input-block">-->
        <!--<button class="layui-btn addproduct" lay-submit="" lay-filter="demo1" onclick="saveAddGuiGe()">保存规格-->
        <!--</button>-->
        <!--</div>-->
        <!--</div>-->
        <!--<hr/>-->
        <div class="layui-form-item">
            <label class="layui-form-label   Fengetext">商品价格:</label>
        </div>
        <input type="hidden" id="guigeId" name="guigeId" value="" autocomplete="off" class="layui-input">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>产品价格(元)</th>
                        <th>市场价格(元)</th>
                        <th>产品成本(元)</th>
                        <th>运营成本(元)</th>
                        <th>购物卷(元)</th>
                        <th>返代金券(元)</th>
                        <th>返积分(元)</th>
                        <th>返消费积分(元)</th>
                        <th>优质店主(元)</th>
                        <th>返购物券(元)</th>
                        <th>最小利润(元)</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><input class="product-price" id="proPrice" type="text" name="proPrice" value=""></td>
                        <td><input class="product-price" id="proMarketPrice" type="text" name="proMarketPrice" value="">
                        </td>
                        <td><input class="product-price" id="proCost" type="text" name="proCost" value=""></td>
                        <td><input class="product-price" id="oprator_cost" type="text" name="oprator_cost" value="">
                        </td>
                        <td><input class="product-price" id="coupon" type="text" name="coupon" value=""></td>
                        <td><input class="product-price" id="visitor" type="text" name="visitor" value=""></td>
                        <td><input class="product-price" id="huiYuan" type="text" name="huiYuan" value=""></td>
                        <td><input class="product-price" id="dianZhu" type="text" name="dianZhu" value=""></td>
                        <td><input class="product-price" id="YZDianZhu" type="text" name="YZDianZhu" value=""></td>
                        <td><input class="product-price" id="otherRank" type="text" name="otherRank" value="0"></td>
                        <td><input class="product-price" id="minLiRun" type="text" name="minLiRun" value=""></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

<div class="layui-form-item">
    <div class="layui-input-block">
        <button class="layui-btn addproduct" lay-submit="" lay-filter="demo1" onclick="addguigeAndPrice()">保存</button>
    </div>
</div>
</div>
</div>
</body>
<script th:src="@{layui/jquery.min.js}"></script>
<script th:src="@{layui/layui.js}"></script>
<script>

    //复选框
    var fenDan = false;
    var buySign = '';
    var commissionSign = '';
    layui.use('form', function () {
        var checkboxform = layui.form;
        checkboxform.on('checkbox(fenDan)', function (data) {
            fenDan = data.elem.checked;
            checkboxform.render();
        });
        checkboxform.on('select(buySign)', function (data) {
            buySign = data.value;

        });
        checkboxform.on('select(commissionSign)', function (data) {
            commissionSign = data.value;
        });
        checkboxform.render();
    })

    //添加规格
    function saveAddGuiGe() {
        var productNo = $('#productNo').val();
        var productId = $('#productId').val();
        var proSize = $('#proSize').val();
        var proWeight = $('#proWeight').val();
        var proTiji = $('#proTiji').val();
        var proColor = $('#proColor').val();
        var otherGuige = $('#otherGuige').val();
        var proLength = $('#proLength').val();
        var proWidth = $('#proWidth').val();
        var proHeight = $('#proHeight').val();
        var proVolume = $('#proVolume').val();
        var guieName = $('#guige-name').val();
        //是否分单
        if (fenDan == true) {
            fenDan = '1';
        } else {
            fenDan = '0';
        }
        var buyCount = $('#buyCount').val();
        var buyCountTotal = $('#buyCountTotal').val();

        $.ajax({
            url: "/addProductGuige?productNo=" + productNo + "&proSize=" + proSize + "&proWeight=" + proWeight + "&proTiji=" + proTiji + "&proColor=" + proColor + "&otherGuige=" + otherGuige + "&fenDan=" + fenDan +
                "&proLength=" + proLength + "&proWidth=" + proWidth + "&proHeight=" + proHeight + "&productId=" + productId + "&proVolume=" + proVolume + "&guigeName=" + guieName + "&buyCount=" + buyCount + "&buyCountTotal=" +
                buyCountTotal + "&buySign=" + buySign + "&commissionSign=" + commissionSign
            , success: function (result) {
                var data = result;
                if (data.guigeId != null && data.productId != "") {
                    $('#guigeId').attr('value', data.guigeId);
                    alert("商品" + $('#productName').val() + "规格添加成功！");
                } else {
                    alert("商品" + $('#productName').val() + "规格添加失败！");
                }

            }
        })
    }


    //保存价格
    function saveAddPrice() {
        var productNo = $('#productNo').val();
        var proPrice = $('#proPrice').val();
        var proMarketPrice = $('#proMarketPrice').val();
        var proCost = $('#proCost').val();
        var opratorCost = $('#oprator_cost').val();
        var coupon = $('#coupon').val();
        var visitor = $('#visitor').val();//游客
        var huiYuan = $('#huiYuan').val();
        var dianZhu = $('#dianZhu').val();
        var YZDianZhu = $('#YZDianZhu').val();
        var otherRank = $('#otherRank').val();//其他等级
        var guigeId = $('#guigeId').val();//规格id
        var productId = $('#productId').val();
        alert("---------------" + guigeId);
        $.ajax({
            url: "/addProductPrice?productNo=" + productNo + "&proPrice=" + proPrice + "&proMarketPrice=" + proMarketPrice + "&proCost=" + proCost + "&opratorCost=" + opratorCost + "&coupon=" + coupon + "&huiYuan=" + huiYuan + "&dianZhu=" + dianZhu + "&YZDianZhu=" + YZDianZhu + "&visitor=" + visitor +
                "&otherRank=" + otherRank + "&guigeId=" + guigeId + "&productId=" + productId,
            success: function (result) {
                var priceRow = result;
            }
        })
    }

    var productNo = $('#productNo').val();
    $('.product-price').change(function () {
        var proPrice = $('#proPrice').val();
        var proMarketPrice = $('#proMarketPrice').val();
        var proCost = $('#proCost').val();
        var opratorCost = $('#oprator_cost').val();
        var coupon = $('#coupon').val();
        var visitor = $('#visitor').val();
        var huiYuan = $('#huiYuan').val();
        var dianZhu = $('#dianZhu').val();
        var YZDianZhu = $('#YZDianZhu').val();
        var minLiRun = $('#minLiRun').val();
        var ortherRank = $('#otherRank').val();
        // minLiRun=proPrice-proCost-opratorCost-coupon-visitor-huiYuan-dianZhu-YZDianZhu-ortherRank;
        minLiRun = proPrice - proCost - opratorCost - coupon - YZDianZhu;
        $('#minLiRun').attr("value", minLiRun);
        $('#minLiRun').css({'color': 'red'});
        if (minLiRun < 0) {
            alert("最低利润小于0，请检查输入是否正确！");
        }
    })

    //复选框
    var fenDan;
    layui.use('form', function () {
        var fenDanform = layui.form;
        fenDanform.on('checkbox(fenDan)', function (data) {
            console.log(data.elem.checked);
            fenDan = data.elem.checked;
        })
    })


    //上传规格图片
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#guigeImg'
            , url: '/addGuiGeImgs'
            , data: {
                proImg: function () {
                    var proImg = $('#proImg').val();
                    return proImg;
                }
            }
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#guigeImg_img').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.msg != '1') {
                    return layer.msg('上传失败!');
                }
                //上传成功
                layer.msg('上传成功！');
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            , size: 1024
        });


        //规格多图片上传
        upload.render({
            elem: '#addGuiGeImgGroup'
            , url: '/addGuiGeGroupImgs'
            , multiple: true
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#guigeImgGroup').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="height: 100px">')
                });
            }
            , done: function (res) {

                layer.alert("上传成功！");

            }
            , size: 2048
        })


    });

    //保存添加规格数据


    function addguigeAndPrice() {
        var productId = $('#product-id').val();

        var proSize = $('#proSize').val();
        var proWeight = $('#proWeight').val();
        var proTiji = $('#proTiji').val();
        var proColor = $('#proColor').val();
        var otherGuige = $('#otherGuige').val();
        var proLength = $('#proLength').val();
        var proWidth = $('#proWidth').val();
        var proHeight = $('#proHeight').val();
        var proVolume = $('#proVolume').val();
        var guieName = $('#guige-name').val();
        var buyCountTotal = $('#buyCountTotal').val();
        var buyCount = $('#buyCount').val();
        var buySign = $('#buySign').val();
        var commissionSign = $('#commissionSign').val();
        var proPrice = $('#proPrice').val();
        var proMarketPrice = $('#proMarketPrice').val();
        var proCost = $('#proCost').val();
        var opratorCost = $('#oprator_cost').val();
        var coupon = $('#coupon').val();
        var visitor = $('#visitor').val();//游客
        var huiYuan = $('#huiYuan').val();
        var dianZhu = $('#dianZhu').val();
        var YZDianZhu = $('#YZDianZhu').val();
        var otherRank = $('#otherRank').val();//其他等级
        alert("yanse" + proColor);
        $.ajax({
            type: 'post',
            url: '/addGuigeAndPriceByProductId',
            data: {
                productId: productId,
                proSize: proSize,
                proWeight: proWeight,
                proTiji: proTiji,
                proColor: proColor,
                otherGuige: otherGuige,
                proLength: proLength,
                proWidth: proWidth,
                proHeight: proHeight,
                proVolume: proVolume,
                guieName: guieName,
                buyCount: buyCount,
                buyCountTotal: buyCountTotal,
                buySign: buySign,
                commissionSign: commissionSign,
                proPrice: proPrice,
                proMarketPrice: proMarketPrice,
                proCost: proCost,
                opratorCost: opratorCost,
                coupon: coupon,
                visitor: visitor,
                huiYuan: huiYuan,
                dianZhu: dianZhu,
                YZDianZhu: YZDianZhu,
                otherRank: otherRank
            },

            success: function (res) {
                if (res.msg == '1') {
                    layer.alert("保存成功！");
                } else {
                    layer.alert("保存失败！");
                }
            }
        })

    }


</script>
</html>

